<template>
  <div>
    <el-form label-width="90px" label-position="left">
      <el-form-item label="发起人" v-if="config.conditionType.indexOf('user')!==-1">
        <div class="teamlist">
          <div class="teamlist-line">
            <!--            <el-input size="small" v-model="config.expression" placeholder="输入发起人"/>-->
            <org-items v-model="select" @selectOrg="selectOrg"/>
          </div>
          <span class="el-icon-delete detelList" @click="detelList('user')"></span>
        </div>
      </el-form-item>
      <div class="config-tiaojian"
           v-if="(config.conditionType.indexOf('user')!==-1 && config.conditionType.indexOf('time')!==-1) || (config.conditionType.indexOf('user')!==-1 && config.conditionType.indexOf('time')!==-1 && config.conditionType.indexOf('type')!==-1)">
        且
      </div>
      <el-form-item v-if="config.conditionType.indexOf('time')!==-1">
        <span slot="label" style="display:inline-block;">
          时长(天)
          <el-tooltip effect="light" content="系统会根据考勤排班时长将小时折算成天；若请假当天未排班，会统一按照8小时为1天折算。" placement="top">
            <i class='el-icon-warning-outline'/>
          </el-tooltip>
        </span>
        <div class="input-line" v-if="config.timeType!=='IN'">
          <div class="time-box-line">
            <el-select v-model="config.timeType" placeholder="请选择" size="small" class="mr10">
              <el-option
                v-for="item in condition"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input size="small" v-model="config.value" placeholder="输入"/>
          </div>
          <span class="el-icon-delete detelList" @click="detelList('time')"></span>
        </div>
        <div class="input-line-list" v-else>
          <div class="input-line-list-time">
            <div class="input-line-list-header">
              <el-select v-model="config.timeType" placeholder="请选择" size="small" style="flex: 1">
                <el-option
                  v-for="item in condition"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <span class="el-icon-delete detelList" @click="detelList('time')"></span>
            </div>
            <div class="input-line-list-footer">
              <el-input size="small" class="mr10" v-model="config.start_time" placeholder="输入" style="flex:1"/>
              <el-select v-model="config.start_value" placeholder="请选择" size="small" class="mr10" style="flex:1">
                <el-option
                  v-for="item in conditionOne"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <span class="input-line-list-footer-span mr10">时长（天） </span>
              <el-select v-model="config.end_time" placeholder="请选择" size="small" class="mr10" style="flex:1">
                <el-option
                  v-for="item in conditionOne"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-input size="small" v-model="config.end_value" placeholder="输入" style="flex:1"/>
            </div>
          </div>
        </div>
      </el-form-item>
      <div class="config-tiaojian"
           v-if="config.conditionType.indexOf('user')!==-1 && config.conditionType.indexOf('time')!==-1 && config.conditionType.indexOf('type')!==-1">
        且
      </div>
      <el-form-item label="请假类型" v-if="checkList.indexOf('type')!==-1">
        <div class="checkbox-group-body">
          <div class="checkbox-group-line">
            <el-checkbox-group v-model="config.leave_type">
              <el-checkbox :label="item.value" v-for="item in holidayList">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <span class="el-icon-delete detelList" @click="detelList('type')"></span>
        </div>
      </el-form-item>
    </el-form>
    <div class="add-rule">
      <el-button size="small" icon="el-icon-plus" class="add-rule-btn" @click="dialogTableVisible=true">添加条件</el-button>
      <span class="add-rule-line">还有{{ 3 - checkList.length }}个可用条件</span>
    </div>
    <el-dialog title="选择条件" :visible.sync="dialogTableVisible" :append-to-body="true" class="my-dialog" width="450px">
      <div class="line-body">
        <div class="line-box">
          请选择用来区分审批流程的条件字段，已选{{ checkList.length }}个
        </div>
        <el-checkbox-group v-model="dialogCheckbox">
          <el-checkbox label="user">发起人</el-checkbox>
          <el-checkbox label="time">时长(天)</el-checkbox>
          <el-checkbox label="type">请假类型</el-checkbox>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitCheck" size="small" plain>确 定</el-button>
      </span>
    </el-dialog>
    <org-picker title="请选择人员/部门" multiple ref="orgPicker" :selected="select" @ok="selected"/>
  </div>
</template>

<script>
import OrgItems from "../OrgItems";
import OrgPicker from "@/components/common/OrgPicker";

export default {
  name: "ConditionNodeConfig",
  components: {OrgPicker, OrgItems},
  props: {
    config: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    selectedNode() {
      return this.$store.state.selectedNode
    },
    select() {
      console.log('select-computed', this.config)
      return this.config.department_check_data
    },
    nowNodeLeave() {
      return this.prioritySortList.indexOf(this.selectedNode)
    },
    //条件节点
    prioritySortList() {
      let node = this.$store.state.nodeMap.get(this.selectedNode.parentId)
      console.log(this.selectedNode.id, node)
      if (node) {
        return node.branchs || []
      }
      return []
    }
  },
  data() {
    return {
      sortOption: {
        animation: 300,
        chosenClass: 'choose',
        scroll: true,
        sort: true
      },
      dialogTableVisible: false,
      dialogCheckbox: ['user'],
      checkList: ['user'],
      holidayTypeList: [],
      value: '',
      holidayList: [
        {
          value: 1,
          label: '事假'
        },
        {
          value: 2,
          label: '病假'
        },
        {
          value: 3,
          label: '调休'
        },
        {
          value: 4,
          label: '产假'
        },
        {
          value: 5,
          label: '婚假'
        },
        {
          value: 6,
          label: '例假'
        }],
      condition: [
        {
          value: '<',
          label: '小于'
        },
        {
          value: '>',
          label: '大于'
        },
        {
          value: '<=',
          label: '小于等于'
        },
        {
          value: '=',
          label: '等于'
        },
        {
          value: '>=',
          label: '大于等于'
        },
        {
          value: 'IN',
          label: '介于(两个数之间)'
        }
      ],
      conditionOne: [
        {
          value: '<',
          label: '<'
        },
        {
          value: '<=',
          label: '≤'
        }
      ]
    }
  },
  created() {
    console.log('this.config', this.config)
  },
  methods: {
    detelList(type){
      this.checkList.splice(this.checkList.indexOf(type), 1)
      if(type=='user'){
        this.config.department_check_data = []
        this.config.departmentId = ''
        this.config.user_check_data = []
        this.config.roleId = ''
      }
      if(type == 'time'){
        this.config.timeType = ''
        this.config.value = ''
        this.config.start_time = ''
        this.config.start_value = ''
        this.config.end_time = ''
        this.config.end_value = ''
      }
      if(type == 'type'){
        this.config.leave_type = ''
      }
    },
    selected(select) {
      console.log('select:', select)
      this.select.length = 0
      select.forEach(val => this.select.push(val))
    },
    removeOrgItem(index) {
      this.select.splice(index, 1)
    },
    submitCheck() {
      this.config.conditionType = this.$deepCopy(this.dialogCheckbox)
      this.checkList = this.$deepCopy(this.dialogCheckbox)
      this.dialogTableVisible =false
    },
    selectOrg() {
      this.$refs.orgPicker.show()
    },
  }
}
</script>

<style lang="less" scoped>
.choose {
  border-radius: 5px;
  margin-top: 2px;
  background: #f4f4f4;
  border: 1px dashed #1890FF !important;
}

.drag-hover {
  color: #1890FF
}

.drag-no-choose {
  cursor: move;
  background: #f8f8f8;
  border-radius: 5px;
  margin: 5px 0;
  height: 25px;
  line-height: 25px;
  padding: 5px 10px;
  border: 1px solid #ffffff;

  div {
    display: inline-block;
    font-size: small !important;
  }

  div:nth-child(2) {
    float: right !important;
  }
}

.add-rule {
  margin-bottom: 20px;
}

.add-rule-line {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}

.line-box {
  margin-bottom: 10px;
}

.config-tiaojian {
  font-size: 14px;
  color: #999;
}

.input-line {
  display: flex;
  align-items: center;
}

.input-line-list {

}

.input-line-list-header {
  display: flex;
  align-items: center;
}

.input-line-list-footer {
  display: flex;
  align-items: center;
}

.input-line-list-footer-span {
  display: block;
  width: 70px;
}

.detelList {
  display: block;
  width: 60px;
  text-align: center;
  cursor: pointer;
  color: #999;
}

.checkbox-group-body {
  display: flex;
}

.checkbox-group-line {
  flex: 1;
}

.teamlist {
  display: flex;
  align-items: center;
}

.teamlist-line {
  flex: 1;
}

.time-box {
  display: flex;
}

.time-box-line {
  flex: 1;
  display: flex;
  align-items: center;
}
</style>
